div.taskboard-table(
    tg-taskboard-squish-column,
    tg-taskboard-sortable,
    ng-class="{'zoom-0': ctrl.zoomLevel == 0}"
)
    div.taskboard-table-header
        div.taskboard-table-inner
            h2.task-colum-name(translate="TASKBOARD.TABLE.COLUMN")
            h2.task-colum-name(
                ng-repeat="s in ::taskStatusList track by s.id"
                ng-style="{'border-top-color':s.color}"
                ng-class="{'column-fold':statusesFolded[s.id]}"
                class="squish-status-{{s.id}}"
                tg-bo-title="s.name"
            )
                span(tg-bo-bind="s.name")

                tg-svg.hfold.fold-action(
                    svg-icon="icon-fold-row",
                    ng-click='foldStatus(s)',
                    title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD' | translate}}"
                    ng-class='{hidden:statusesFolded[s.id]}'
                )

                tg-svg.hunfold.fold-action(
                    svg-icon="icon-unfold-row",
                    ng-click='foldStatus(s)',
                    title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD' | translate}}"
                    ng-class='{hidden:!statusesFolded[s.id]}'
                )

    div.taskboard-table-body(tg-taskboard-table-height-fixer)
        div.taskboard-table-inner
            div.taskboard-row(
                ng-repeat="us in userstories track by us.id",
                ng-class="{blocked: us.is_blocked, 'row-fold':usFolded[us.id]}"
            )
                div.taskboard-row-title-box.taskboard-column(tg-bo-title="us.blocked_note")
                    tg-svg.vfold.fold-action(
                        svg-icon="icon-fold-row",
                        ng-click='foldUs(us.id)'
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD_ROW' | translate}}"
                        ng-class='{hidden:usFolded[us.id]}'
                    )

                    tg-svg.vunfold.fold-action(
                        svg-icon="icon-unfold-row",
                        ng-click='foldUs(us.id)'
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD_ROW' | translate}}"
                        ng-class='{hidden:!usFolded[us.id]}'
                    )

                    h3.us-title
                        a(href="",
                          tg-nav="project-userstories-detail:project=project.slug,ref=us.ref",
                          tg-nav-get-params="{\"milestone\": {{us.milestone}}}",
                          tg-bo-title="'#' + us.ref + ' ' + us.subject")
                            span.us-ref(tg-bo-ref="us.ref")
                            span(ng-bind-html="us.subject | emojify")
                            tg-belong-to-epics(
                                format="pill"
                                ng-if="us.epics"
                                epics="us.epics"
                            )
                    div.us-data
                        p.status-value(ng-if="usStatusById[us.status]")
                            span(
                              ng-style="{'color': usStatusById[us.status]['color']}"
                              ng-bind="usStatusById[us.status]['name']")
                        p.points-value(data-id="{{us.id}}")
                            span(ng-bind="us.total_points")
                            span(ng-if="us.total_points"
                                 translate="TASKBOARD.TABLE.FIELD_POINTS"
                            )
                            span.card-estimation.not-estimated(
                                ng-if="!us.total_points",
                                translate="US.NOT_ESTIMATED"
                            )
                        tg-due-date.due-date(
                            due-date="us.due_date"
                            is-closed="us.is_closed"
                            ng-if="us.due_date"
                            obj-type="us"
                        )
                    include ../components/addnewtask


                div.taskboard-cards-box.taskboard-column(
                    ng-repeat="st in ::taskStatusList track by st.id",
                    class="squish-status-{{st.id}}",
                    ng-class="{'column-fold':statusesFolded[st.id]}",
                    tg-bind-scope
                )
                    .card-placeholder(
                         ng-if="ctrl.showPlaceHolder(st.id, us.id)"
                         ng-include="'common/components/taskboard-placeholder.html'"
                    )
                    tg-card.card.ng-animate-disabled(
                        tg-repeat="task in usTasks.getIn([us.id.toString(), st.id.toString()]) track by task.get('id')"
                        ng-class="{'kanban-task-maximized': ctrl.isMaximized(s.id), 'kanban-task-minimized': ctrl.isMinimized(s.id)}"
                        tg-class-permission="{'readonly': '!modify_task'}"
                        tg-bind-scope,
                        on-toggle-fold="ctrl.toggleFold(id, 'tasks')"
                        on-click-edit="ctrl.editTask(id)"
                        on-click-delete="ctrl.deleteTask(id)"
                        on-click-assigned-to="ctrl.changeTaskAssignedTo(id)"
                        project="project"
                        item="task"
                        zoom="ctrl.zoom"
                        zoom-level="ctrl.zoomLevel"
                        type="task"
                    )
            div.taskboard-row(ng-init="us = null", ng-class="{'row-fold':usFolded[null]}")
                div.taskboard-row-title-box.taskboard-column
                    a.vfold(
                        href=""
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD_ROW' | translate}}"
                        ng-click='foldUs(null)'
                        ng-class="{hidden:usFolded[null]}"
                    )
                        tg-svg.fold-action(svg-icon="icon-fold-row")
                    a.vunfold(
                        href=""
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD_ROW' | translate}}"
                        ng-click='foldUs(null)'
                        ng-class="{hidden:!usFolded[null]}"
                    )
                        tg-svg.fold-action(svg-icon="icon-unfold-row")
                    h3.us-title
                        span(translate="TASKBOARD.TABLE.ROW_STORYLESS_TASKS_TITLE")
                    include ../components/addnewtask.jade

                div.taskboard-cards-box.taskboard-column(
                    ng-repeat="st in ::taskStatusList track by st.id",
                    class="squish-status-{{st.id}}",
                    ng-class="{'column-fold':statusesFolded[st.id]}",
                    tg-bind-scope
                )
                    .card-placeholder(
                         ng-if="ctrl.showPlaceHolder(st.id, us.id)"
                         ng-include="'common/components/taskboard-placeholder.html'"
                    )

                    tg-card.card.ng-animate-disabled(
                        tg-bind-scope,
                        tg-repeat="task in usTasks.getIn(['null', st.id.toString()]) track by task.get('id')"
                        ng-class="{'kanban-task-maximized': ctrl.isMaximized(s.id), 'kanban-task-minimized': ctrl.isMinimized(s.id)}"
                        tg-class-permission="{'readonly': '!modify_task'}"
                        on-toggle-fold="ctrl.toggleFold(id, 'tasks')"
                        on-click-edit="ctrl.editTask(id)"
                        on-click-delete="ctrl.deleteTask(id)"
                        on-click-assigned-to="ctrl.changeTaskAssignedTo(id)"
                        project="project"
                        item="task"
                        zoom="ctrl.zoom"
                        zoom-level="ctrl.zoomLevel"
                        type="task"
                    )
        div.taskboard-row.issues-row(ng-class="{'row-fold':usFolded[0]}")
            div.taskboard-row-title-box.taskboard-column
                div.task-colum-name
                    a.toggle-fold.vfold(
                        href=""
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_FOLD_ROW' | translate}}"
                        ng-click='foldUs(0)'
                        ng-class="{hidden:usFolded[0]}"
                    )
                        tg-svg.fold-action(svg-icon="icon-fold-row")
                    a.toggle-fold.vunfold(
                        href=""
                        title="{{'TASKBOARD.TABLE.TITLE_ACTION_UNFOLD_ROW' | translate}}"
                        ng-click='foldUs(0)'
                        ng-class="{hidden:!usFolded[0]}"
                    )
                        tg-svg.fold-action(svg-icon="icon-unfold-row")
                    span.row-title(translate="TASKBOARD.TABLE.ROW_ISSUES_TITLE")
                    include ../components/addnewissue.jade

            div.taskboard-cards-box
                tg-card.card.ng-animate-disabled(
                    tg-repeat="issue in milestoneIssues"
                    class="kanban-task-minimized"
                    tg-class-permission="{'readonly': '!modify_issue'}"
                    tg-bind-scope,
                    on-toggle-fold="ctrl.toggleFold(id, 'issues')"
                    on-click-edit="ctrl.editIssue(id)"
                    on-click-remove="ctrl.removeIssueFromSprint(id)"
                    on-click-delete="ctrl.deleteIssue(id)"
                    on-click-assigned-to="ctrl.changeIssueAssignedTo(id)"
                    project="project"
                    item="issue"
                    zoom="ctrl.zoom"
                    zoom-level="ctrl.zoomLevel"
                    type="issue"
                )